<template>
	<!-- {{number}}===={{msg}}
	<button @click="setNum">修改number</button> -->

	<div class='div'>
		<div @click='change(item.com)' v-for="item in Tab">{{item.tab}}</div>
	</div>
	<!-- 如果组件是异步的就必须要用<Suspense>包裹 -->
	<Suspense>
		<template #default>
			<component :is="setTabValue.tab" />
		</template>
		<template #fallback>
			加载中请稍等
		</template>
	</Suspense>

</template>

<script setup>
	import Dynamic1 from '@/components/dome/Dynamic1.vue'
	import Dynamic2 from '@/components/dome/Dynamic2.vue'
	import Dynamic3 from '@/components/dome/Dynamic3.vue'
	import signature from '@/components/dome/signature.vue'
	import {
		ref, //让变量是响应式的一般用于简单数据类型
		toRefs, //当需要解构是 需用toRefs(需要结构的值) 结构出来的值才是响应式的
		reactive, //让变量是响应式的一般用于复杂数据类型
		computed,
		watch,
		watchEffect, //可以监听全部任意一个变量
		markRaw //使数据不在是响应式的
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import mixins from '@/Mixins/index.js'
	let Tab = reactive([{
		tab: "1.pinia",
		com: markRaw(Dynamic1)
	}, {
		tab: "2.传参",
		com: markRaw(Dynamic2)
	}, {
		tab: "3.兄弟传参",
		com: markRaw(Dynamic3)
	}, {
		tab: "4.签字",
		com: markRaw(signature)

	}])
	let setTabValue = reactive({
		tab: Tab[0].com
	})
	console.log(mixins(), 'mixins')

	function change(e) {
		setTabValue.tab = e
	}
	watchEffect(() => {
		console.log('可以监听页面的任意一个变量')
	})
	watch(setTabValue, (newval, oldval) => {
		console.log(newval, oldval)
	}, {
		deep: true,
		immediate: true
	})
	//computed 的两种用法


	// let msg = reactive({
	// 	a: 1,
	// 	b: computed(() => {
	// 		return msg.a + 10
	// 	})
	// })

	// let number = ref("这个是简短数据类型");
	// let msg = computed({
	// 	get(){
	// 		return number.value.slice(1, 2)
	// 	},
	// 	set(val){
	// 		//msg  被修改的时候会触发
	// 		console.log('修改', val)
	// 		return value = '计算属性点击了set'
	// 	}
	// })
	// function setNum(){
	// 	number.value='被修改了'
	// 	msg.value='333333'
	// }
</script>

<style>
	/* ul,li{
		list-style: none;
	} */
	.div {
		display: grid;
		/* grid: 20rpx 20rpx 20rpx; */
		grid-template-columns: auto auto auto;
		/* grid-template-rows: 50px 50px 50px; */
		text-align: center;
		color: cornflowerblue;

	}
</style>